<template>
  <div class="job_join">
    <van-sticky>
      <van-nav-bar title="应聘职位" left-arrow @click-left="back" />
    </van-sticky>

    <van-field v-model="form.name" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
    <van-field v-model="form.gender" label="性别" placeholder="性别" readonly @click="SexTime()" :rules="[{ required: true, message: '请填写性别' }]" />
    <van-field v-model="form.birthday" readonly @click="setTime('birthday')" label="出生日期" placeholder="出生日期"  :rules="[{ required: true, message: '请填写出生日期' }]" />
    <van-field v-model="form.education" label="学历" placeholder="学历" :rules="[{ required: true, message: '请填写学历' }]" />
    <van-field v-model="form.worktime" @click="setTime('worktime')" readonly label="参加工作时间" placeholder="参加工作时间" :rules="[{ required: true, message: '请填写参加工作时间' }]" />
    <van-field v-model="form.address" label="居住城市" placeholder="居住城市" :rules="[{ required: true, message: '请填写居住城市' }]" />
    <van-field v-model="form.tellphone" label="手机号码" placeholder="手机号码" :rules="[{ required: true, message: '请填写手机号码' }]" />
    <van-field v-model="form.email" label="邮箱" placeholder="邮箱" :rules="[{ required: true, message: '请填写邮箱' }]" />
    <div style="margin: 16px;">
      <van-button round block type="info" @click="join">
        立即投递
      </van-button>
    </div>
	<van-popup v-model="SexTimes" position="bottom">
	
		<van-picker
		  show-toolbar
		  :columns="columns"
		  @cancel="onConfirmsex = false"
		  @confirm="onConfirmsex"
		/>
	</van-popup>
    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker :min-date="minDate" type="date" @confirm="onConfirm" :formatter="formatter" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>
<script>
import api from 'api/api'
export default {
  data () {
    return {
		   minDate: new Date(1900, 0, 1),
		      maxDate: new Date(2055, 10, 1),
      username: '',
      password: '',
	   columns: ['男', '女'],
      form: {
        name: '',
        gender: '',
        birthday: '',
        education: '',
        worktime: '',
        address: '',
        tellphone: '',
        email: '',
        recruitmentId: this.$route.params.id
      },
      showTime: false,
      timeType: '',
	  SexTimes:false

    };
  },
  methods: {
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    },
    back () {
      window.history.go(-1)
    },
	SexTime(){
		this.SexTimes=true
	},
    setTime (type) {
      this.timeType = type
      this.showTime = true
    },
    onSubmit (values) {
      console.log('submit', values);
    },
	onConfirmsex(val){
		// console.log(val)
		this.SexTimes=false
		this.form.gender=val
	},
    onConfirm (val) {
      this.showTime = false
      var time = new Date(val)
      var year = time.getFullYear()
      var mounth = time.getMonth() + 1
      var day = time.getDate()
      this.form[this.timeType] = year + '-' + mounth + '-' + day
    },
    join () {
		for(let i in this.form){
			// console.log(this.form[i],i)
			if(!this.form[i]){
				this.$toast('信息不能为空')
				return
			}
		}
		if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.tellphone))){
			this.$toast('手机号输入有误')
			return;
		}
		else if(!(/^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/.test(this.form.email))){
			this.$toast('邮箱输入有误')
			return;
		}
	
      api.jobJoin({
        data: this.form
      }).then(res => {
		 if(res.code==200){
			this.$toast('申请成功')
			 this.back()
		 }
      })
    }
  },
}
</script>
<style lang="scss">
.job_join {
  text-align: left;
}
</style>